<template>
	<div class="home" @click="searchFlowVisible=false">
		<el-menu default-active="1" class="el-menu-demo" mode="horizontal"
			background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"
			@select="tab_nav">
			<el-menu-item index="1">前端</el-menu-item>
			<el-menu-item index="2">JAVA</el-menu-item>
			<el-menu-item v-if="loginUser.is_admin == 1">
				<router-link to="/admin">管理后台</router-link>
			</el-menu-item>
		</el-menu>
		<!-- 全局搜索框 -->
		<div class="search-container d-flex">
			<input type="text" class="form-control" placeholder="输入题目关键字可进行全局搜索"
				@input="search" v-model="searchKeywords">
			<div class="search-btn btn btn-sm btn-outline-primary">搜 索</div>
			<ul class="droplist nav nav-pills flex-column" v-show="searchFlowVisible">
				<li class="nav-item" v-for="item in searchFlow" @click="row_click(item)">
					<a class="nav-link">{{item.title}} <span class="category">{{categoryText(item.category)}}</span> </a>
				</li>
			</ul>
		</div>
		<el-row class="main">
			<!-- 题目列表 -->
			<el-col :span="6" class="scrollable">
				<el-collapse v-if="options[navActiveIndex-1]" class="main_subject-list_wrapper">
					<!-- ctg.value等于0，显示为全部（这里要屏蔽掉） -->
					<el-collapse-item  v-if="ctg.value != 0"
						v-for="ctg in options[navActiveIndex-1].children" 
						:title="ctg.label" 
						:name="ctg.value">
						<ul class="subject-items">
							<li v-for="subject in filterList(ctg.value)"
								:class="{'is-active': subject.id == currentSubject.id}"
								@click="row_click(subject)">
								{{subject.title}}
							</li>
						</ul>
					</el-collapse-item>
				</el-collapse>
			</el-col>
			<el-col :span="18" v-loading="loading" class="scrollable">
				<el-col :span="22" :offset="1" class="scrollable">
					<div v-if="!currentSubject.id" class="intro">
						支持标准的MD文档显示
					</div>
					<template v-else>
						<!-- 代码风格列表 -->
						<div class="mb-3 fixed code-style-list" v-show="codeStylesVisible">
							<ul class="nav nav-tabs">
								<li class="nav-item" v-for="_style in codeStyles" >
									<a class="nav-link" :class="{'active':_style==codeStyle}"
										@click="change_code_style(_style)">{{_style}}</a>
								</li>
							</ul>
						</div>
                        <div class="twill">
                            <div class="twill-text">{{currentSubject.title}}</div>
                        </div>
						<!-- md编辑器 -->
						<!-- subfield控制双栏显示，toolbarsFlag控制工具栏显示 -->
						<mavon-editor v-model="mdText" ref="md"
							class="markdown-editor"
							defaultOpen="preview" 
							:codeStyle="codeStyle" 
							:toolbarsFlag="false" 
							:subfield="false" 
							:boxShadow="false"
						/>
					</template>
					<span class="code-style-btn" v-show="codeStyleControl" @click="codeStylesVisible=true">代码风格</span>
				</el-col>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import { api_subject_list, api_subject_detail } from '@/api/subject'
	import {debounce} from '@/utils'
	import options from '../utils/options.js'
	import codeStyles from '../utils/codeStyle.js'
	export default {
		data() {
			return {
				loading: false,
				navActiveIndex: 1, //学科导航 1 HTML5 2 JAVA
				mdText: '', //md文档内容
				codeStyle: 'atom-one-light', //代码风格主题
				currentSubject: {}, //当前选中题目
				mdList: [], //题目列表
				options, //拉下选项列表（目前由前端存储）
				codeStyles, //代码风格列表
				codeStylesVisible:false , 
				searchFlow: [] ,//搜索联想列表
				searchFlowVisible: false, 
				codeStyleControl: false, //代码风格切换按钮是否显示
				searchKeywords: ''
			}
		},
		computed: {
			filterList() {
				//将题目列表按照category分类显示
				return function(category) {
					return this.mdList.filter(item=>{
						return item.category == category
					})
				}
			},
			categoryText() {
				let ctgList = {
					1: 'HTML + CSS',
					2: 'Javascript',
					3: 'Vue相关',
					4: 'React相关',
					5: '网络通信',
					6: '项目工程化',
					7: 'nodeJS',
					8: 'TypeScript',
					9: '数据结构',
					10: '小程序',
					11: '设计模式',
					12: '其他'
				}
				return function(ctg) {
					return ctgList[ctg]
				}
			},
			loginUser() {
				return JSON.parse(localStorage.getItem('loginUser'))
			}
		},
		created() {
			this.load_data()
		},
		methods: {
			tab_nav(index) {
				//切换导航tab，重新加载数据
				this.navActiveIndex = index
				this.load_data()
			},
			load_data() {
				api_subject_list({
					type: this.navActiveIndex,
					pageNum:1,
					pageSize: 100
				}).then(res => {
					this.mdList = res.data.result
				})
			},
			search: debounce(function(e) {
				if(!e.target.value) { //清空
					this.searchFlow = []
					this.searchFlowVisible = false
					return
				}
				//本地搜索（数据过滤）
				this.searchFlow = this.mdList.filter(md=>{
					return md.title.toLowerCase().indexOf(e.target.value.trim().toLowerCase()) > -1 //标题搜索
				})
				//查到了再显示
				if(this.searchFlow.length) this.searchFlowVisible = true
			}, 150), 
			row_click(subject) {
				if(this.currentSubject == subject) return;
				this.currentSubject = subject //记录当前选中题目
				this.searchKeywords = '' //清空输入框
				this.loading = true
				api_subject_detail({
					id: subject.id
				}).then(res => {
					console.log(res.data.result);
					this.mdText = res.data.result.content
					this.loading = false
					this.codeStyleControl = true
				})
			},
			change_code_style(_style) {
				this.codeStyle = _style
				this.codeStylesVisible = false
			}
		}
	}
</script>
<style lang="scss" scoped>
	.home {
		height: 100%;
		.search-container {
			position: fixed;
			width: 700px;
			height: 40px;
			left: calc(50% - 300px);
			top: 10px;
			z-index: 1501;
			> input {
				height: 40px; border-radius: 20px;
			}
			.search-btn {
				line-height: 36px; 
				padding: 3px 20px; 
				margin-left:5px; 
				width: 90px;
			}
			.droplist {
				position: absolute;
				width: calc(100% - 90px);
				top: 105%;
				box-shadow: 5px 5px 10px rgb(55 94 148 / 20%), 0px 0px 8px rgb(255 255 255 / 40%);
				li.nav-item {
					a:hover {
						box-shadow: inset 0 3px 6px rgb(0 0 0 / 20%);
						background-color: var(--bs-nav-pills-link-active-bg);
						color: white;
					}
					span.category {
						float: right;
						color: #aaa;
					}
				}
			}
		}
		.main {
			height: calc(100% - 60px);
			.scrollable {
				box-sizing: border-box;
				padding: 10px 0;
				height: 100%;
				background-color: rgba(255, 255, 255, 0.8);
				overflow-y: auto;
			}
			.main_subject-list_wrapper {
				text-indent: 1em;
				.subject-items {
					list-style: none;
					padding: 0;
					margin: 0;
					text-indent: 1em;
					> li {
						line-height: 250%;
						font-size: 15px;
						position: relative;
						cursor: pointer;
						&.is-active {
							color: #3eaf7c;
							font-weight: bold;
						}
						&.is-active::before {
							position: absolute;
							content: '';
							width: 4px;
							height: 100%;
							display: block;
							background-color: #3eaf7c;
						}
					}
				}
			}
			
			.intro {
				display: flex;
				height: 400px;
				justify-content: center;
				align-items: center;
				font-size: 40px;
				font-weight: bold;
				opacity: 0.3;
			}
			.code-style-list {
				ul {
					li {
						cursor: pointer;
					}
				}
			}
			.code-style-btn {
				display: block;
				width: 25px;
				border-radius: 4px;
				cursor: pointer;
				padding: 5px;
				font-size: 14px;
				font-weight: normal;
				opacity: 1;
				color: var(--bs-gray-200);
				background-color: var(--bs-body-color);
				position: absolute;
				top: 10px;
				right: 10px;
				text-align: center;
				text-indent: 0;
				z-index: 9998;
			}
			.markdown-editor {
				font-size: 18px;
			}
			.fixed {
				width: 65%;
				position: fixed;
				z-index: 9990;
			}
		}
	}
	::v-deep {
		.el-collapse-item__header {
			color: var(--bs-body-color);
			font-size: 16px;
			font-weight: bold;
		}
	}
	::v-deep {
		.lang-javascript {
			font-size: 14px;
		}
	}
</style>
